<script lang="tsx">
import { computed, defineComponent, unref } from "vue";
import { useAppStore } from "@/store/modules/app";
import { ElScrollbar, ElMenu } from "element-plus";
import { useRenderMenuItem } from "./components/useRenderMenuItem";
// import { AsyncRouter } from "@/router";
import { useRouter } from "vue-router";
import { isUrl } from "@/utils/is";
import { usePermissionStore } from "@/store/modules/permission";
export default defineComponent({
  name: "Menu",
  setup() {
    const permissionStore = usePermissionStore();
    const routes = computed(() => permissionStore.getRoutes);
    const appStore = useAppStore();
    const layout = computed(() => appStore.getLayout);
    const collapse = computed(() => appStore.getCollapse);
    const { currentRoute, push } = useRouter();
    const menuSelect = (index: string) => {
      if (isUrl(index)) {
        window.open(index);
      } else {
        push(index);
      }
    };

    const activeMenu = computed(() => {
      const { meta, path } = unref(currentRoute);
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu as string;
      }
      return path;
    });

    const renderMenu = () => {
      return (
        <>
          <ElMenu
            defaultActive={unref(activeMenu)}
            collapse-transition={true}
            style={{
              width: unref(collapse)
                ? "var(--left-menu-max-width)"
                : "var(--left-menu-min-width)",
            }}
            collapse={!unref(collapse)}
            // backgroundColor="var(--left-menu-bg-color)"
            textColor="var(--left-menu-text-color)"
            activeTextColor="var(--left-menu-active-text-color)"
            onSelect={menuSelect}
          >
            {{
              default: () => {
                const { renderMenuItem } = useRenderMenuItem();
                return renderMenuItem(unref(routes));
              },
            }}
          </ElMenu>
        </>
      );
    };

    const renderMenuWrap = () => {
      if (unref(layout) === "top") {
        return renderMenu();
      } else {
        return <ElScrollbar>{renderMenu()}</ElScrollbar>;
      }
    };

    return () => (
      <div style="height:100%;background-color:var(--left-menu-bg-color)">
        {renderMenuWrap()}
      </div>
    );
  },
});
</script>

<style lang="less" scoped>
.el-menu {
  border-right: none;
  transition: width var(--transition-time-02);
  // 折叠时的最小宽度
  :deep(.el-menu--collapse) {
    width: var(--left-menu-min-width);
    & > .is-active,
    & > .is-active > .el-sub-menu__title {
      position: relative;
      background-color: var(--left-menu-collapse-bg-active-color) !important;
    }
  }
}
</style>

<style lang="less" scoped>
// 设置选中时的高亮背景和高亮颜色
.el-menu-item.is-active {
  color: var(--left-menu-text-active-color) !important;
  background-color: var(--left-menu-bg-active-color) !important;

  &:hover {
    background-color: var(--left-menu-bg-active-color) !important;
  }
}
</style>
